<template>
	<view class="custom-video">
		<block v-for="(item,index) of list" :key="index">
			<view class="custom-video-item" :style="[videoStyle]" @click="showDetail(item.id)">
				<view class="custom-video-item-left">
					<view class="img-box-bg">
						<image :src="item.img"/>
					</view>
					<view class="bg-shadeBottom custom padding-xs padding-top-xl flex justify-between align-center text-xs">
						<view>{{item.views_count}}</view>
						<view>{{item.duration}}</view>
					</view>
				</view>
				<view class="custom-video-item-right">
					<view class="text-content hidden2" >
						<text style="color:#343436;">
							{{item.title}}
						</text>
					</view>
					<view class="flex align-center">
						<view class="margin-right-xs">
							<image class="cu-avatar round" :src="item.avatar" :style="{width:'50rpx',height:'50rpx'}"/>
						</view>
						<view>{{item.nickname}}</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			videoStyle: {
				type: Object,
				default: () => ({})
			},
			list:{
				type:Array,
				default:()=>([])
			}
		},
		methods:{
			showDetail(id) {
				this.$h.router.push({
					path:"/pages/video/videoDetail",
					params:{
						id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-video {
		display: flex;
		flex-direction: column;

		.custom-video-item {
			display: flex;
			justify-content: space-between;
			margin: 10rpx 0;
			background-color: #fff;

			&-left {
				width: 200rpx;
				height: 160rpx;
				position: relative;

				.img-box-bg {
					image {
						width: 200rpx;
						height: 160rpx;
					}
				}
			}

			&-right {
				flex: 1;
				padding:5rpx 0 5rpx 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}
</style>
